﻿<%-- 
    Copyright (C) Binod Nepal, Planet Earth Solutions Pvt. Ltd., Kathmandu.
	Released under the terms of the GNU General Public License, GPL, 
	as published by the Free Software Foundation, either version 3 
	of the License, or (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
    See the License here <http://www.gnu.org/licenses/gpl-3.0.html>.
--%>

<%@ Page Title="MixNP Classifieds Online" Language="C#" MasterPageFile="~/Classifieds/Main.Master"
    AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MixNP.Web.Classifieds.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="StyleSheetContentPlaceHolder" runat="server">
    <link href="/Resources/Scripts/jcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptsContentPlaceHolder" runat="server">
    <script src="/Resources/Scripts/jcarousel/lib/jquery.jcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">

        // Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
        jQuery.easing['BounceEaseOut'] = function (p, t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        };

        jQuery(document).ready(function () {
            jQuery('#mycarousel').jcarousel({
                easing: 'BounceEaseOut',
                animation: 150,
                auto: 2,
                wrap: 'circular',
                initCallback: mycarousel_initCallback
            });
        });

        jQuery(document).ready(function () {
            jQuery('#mycarousel2').jcarousel({
                easing: 'BounceEaseOut',
                animation: 150,
                auto: 3,
                wrap: 'circular',
                initCallback: mycarousel_initCallback
            });
        });

        function mycarousel_initCallback(carousel) {
            carousel.clip.hover(function () {
                carousel.stopAuto();
            }, function () {
                carousel.startAuto();
            });
        };


    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="BodyContentPlaceHolder" runat="server">
    <table style="width: 100%;">
        <tr style="vertical-align: middle;">
            <td>
                <h1>
                    What Do You Want to Do?
                </h1>
            </td>
            <td style="float: right;">

                <p id="search">
                    <asp:TextBox ID="SearchTextBox" runat="server" CssClass="textbox normal-width" OnTextChanged="ShowMeButton_Click"
                        placeholder="Search ..." />
                </p>

            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="play">
                    <a id="sellanchor" style="cursor: pointer;" onclick="hidePanel(this.id, 'sell', 'whatshere', 'list')">
                        Sell Something
                    </a>
                    <a id="whatshereanchor" style="cursor: pointer; font-weight: bold;" onclick="hidePanel(this.id, 'whatshere', 'sell', 'list')">
                        What's Here</a>
                    <a id="listanchor" style="cursor: pointer;" onclick="hidePanel(this.id, 'list', 'whatshere', 'sell')">
                        View Categories</a>
                    <a id="playanchor" style="cursor: pointer;" href="/play.mix">
                        Play 'Want This?'</a>
                </div>
                <div id="sell" style="display: none;">
                    <h2>
                        Please Select a Category to Post a Free Ad
                    </h2>

                    <p>
                        <asp:DropDownList ID="CategoryDropDownList" runat="server" DataTextField="CategoryName"
                            DataValueField="CategoryId" DataSourceID="SqlDataSource1" CssClass="dropdownlist wide">
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PESConnectionString %>"
                            SelectCommand="SELECT
	                                        CategoryId,
	                                        CategoryName + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;--' + dbo.GetParentCategoryName(CategoryId) + '' AS CategoryName 
                                        FROM dbo.Categories
                                        WHERE ParentCategoryId IS NOT NULL
                                        ORDER BY ParentCategoryId;"></asp:SqlDataSource>
                    </p>

                    <p>
                        <asp:Button ID="StartButton" runat="server" Text="Let's Start" CssClass="button"
                            OnClick="StartButton_Click" />
                    </p>

                </div>
                <div id="whatshere">
                    <div class="category-header tpad12 hpad4">
                        New Additions</div>
                    <asp:Literal ID="CaraoselLiteral" runat="server" />
                    <div class="category-header tpad8 hpad4">
                        Most Popular</div>
                    <asp:Literal ID="MostPopularLiteral" runat="server" />
                </div>
                <div id="list" style="display: none;">
                    <table style="width: 100%;">
                        <tr>
                            <td class="cat-cell">
                                <asp:Literal ID="LeftLiteral" runat="server" />
                            </td>
                            <td class="cat-cell">
                                <asp:Literal ID="MiddleLiteral" runat="server" />
                            </td>
                            <td class="cat-cell">
                                <asp:Literal ID="RightLiteral" runat="server" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsContentPlaceHolderBottom"
    runat="server">
    <script type="text/javascript">

        var hidePanel = function (callerId, panelId, panel2Id, panel3Id, panel4Id) {
            var caller = jQuery("#" + callerId);

            var panel = jQuery('#' + panelId);
            var panel2 = jQuery('#' + panel2Id);
            var panel3 = jQuery('#' + panel3Id);
            var panel4 = jQuery('#' + panel4Id);

            $('#' + panelId + 'anchor').css('font-weight', 'normal');
            $('#' + panel2Id + 'anchor').css('font-weight', 'normal');
            $('#' + panel3Id + 'anchor').css('font-weight', 'normal');
            $('#' + panel4Id + 'anchor').css('font-weight', 'normal');

            caller.css('font-weight', 'bold');

            panel2.hide(1000);
            panel3.hide(1000);
            panel4.hide(1000);
            panel.show(1000);
        }    
    </script>
    <script type="text/javascript">
        $(window).load(function () {
            equalHeight($(".fly-header"));
        });
    </script>
</asp:Content>
